<template>
  <!-- 视频 -->
  <div id="audioVisual">
    <van-list
      v-model="loading"
      :finished="finished"
      offset="10"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item
          v-for="(video, index) in videoList"
          :key="index"
          @click="handleOpen(video)"
        >
          <template #text>
            <div class="van-multi-ellipsis--l2" style="font-size: 14px">
              {{ video.title }}
            </div>
          </template>
          <template #icon>
            <van-image
              width="100%"
              height="100%"
              fit="scale-down"
              :src="video.coverUrl"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </van-list>
  </div>
</template>

<script>
import { getSearch } from "@/api/search";
export default {
  name: "audioVisual",
  data() {
    return {
      loading: true,
      finished: false,
      rowText: "",
      limit: 20,
      type: 1014,
      videoList: [],
    };
  },
  methods: {
    handleOpen(row) {
      this.$router.push({
        path: "/videoDtl",
        query: { id: row.vid },
      });
    },
    onLoad() {
      this.loading = true;
      this.limit = this.limit + 10;
      getSearch(this.rowText, this.limit, this.type).then((res) => {
        if (res.code == 400) {
          return (this.finished = true);
        }
        this.videoList = res.result.videos.sort((a, b) => a > b);
        this.loading = false;
      });
    },
    initData() {
      getSearch(this.rowText, this.limit, this.type).then((res) => {
        this.videoList = res.result.videos.sort((a, b) => a > b);
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
</style>